html,body,header,nav,footer,div,ul,ol,li,p,form,input,a,span,em,i,strong,b,font,img{
		margin:0;
		padding:0;
		list-style:none;
		border:none;
	}
body{
	font-family:"微软雅黑"; 
	font-size:14px; 
	height:800px;
	background-color: #91B9F7;
	background:url(images/big.png); 
	overflow-x:hidden;
}
a{
	text-align:center;
	text-decoration:none; 
	outline:none;
}
input{outline:none;}
em{font-style:normal;}
<!--头部-->
#header{
	width:100%;
	height:132px; 
	position:relative; 
	left:0; top:0;
}
.nav_topbar{
	width:100%; 
	min-width:1180px; 
	height:30px; 
	background:#e9e9e9;
	box-shadow:1px 1px 10px #112233;
	border-top:2px solid #77c2f3;
}
.nav_topbar_cont{
	width:1180px; 
	height:32px; 
	margin:0 auto; 
	position:relative; 
	left:0; top:0;
}
.nav_topbar_cont ul li {height:32px; float:left;}	
.nav_topbar_cont ul li a{
	width:70px; 
	height:32px; 
	display:block; 
	line-height:32px;
	color:#666;	
	font-size:12px;
}
.nav_topbar_cont ul li a:hover{color:#ffae00;}
.nav_topbar a.user_login{
	width:75px; height:30px; 
	display:block; padding:0 5px 0 20px;
	position:absolute;
	right:65px; top:0; 
	line-height:30px; color:#666; 
	text-align:center; font-size:12px; z-index:6;
	background:url(../images/user.png) no-repeat 2px 6px; 
	overflow:hidden;
	transition:.5s; 
	-webkit-transition:.5s;
}
.nav_topbar a.btn_active{background:#fff;}
.nav_topbar a.user_login i.arrow{
	width:10px; 
	height:10px; 
	display:inline-block;
	background:url(../images/icos.png) no-repeat -24px -9px; 
	margin-left:5px;
	transition:.5s; 
	-webkit-transition:.5s;
}	
.nav_topbar a.user_login:hover{
	color:#ff9d00;
	background:url(../images/user2.png) no-repeat 2px 6px;
}
.nav_topbar a.user_login:hover i{background-position:-24px 4px;}
.nav_topbar .user_login_box{
	width:200px; height:185px; 
	border-bottom:3px solid #77c2f3;
	position:absolute; 
	right:65px; top:37px; 
	z-index:12;
	background:#fff; 
	padding:15px; padding-top:0;
	color:#999;
	box-shadow:1px 1px 10px #112233;
}
.shadow_cover{width:100%; height:12px; background:#fff;
		position:absolute; left:0; top:-12px;}
.user_login_inner .ipt{
	width:100%; height:32px; 
	background:rgb(249,249,249);
	margin:5px 0;  
	font-weight:500; 
	text-indent:10px; 
	color:#999;
	border:1px solid #ddd;
	border-radius:3px; 
	line-height:32px;
}
#rememberme{margin:5px 5px 0 0;}
.user_login_inner input.login_btn{
	width:100%; 
	height:35px; 
	display:block;
	background:#77c2f3;	
	border-radius:2px; 
	margin:10px 0;
	color:#fff;  
	font-weight:bold; 
	cursor:pointer;
	font-family:"微软雅黑";
}
.user_login_inner input.login_btn:hover{background:#ffae00;}
.user_login_inner a{color:#666/*1ABC9C*/;}
.user_login_inner a:hover{color:#f60;}
.user_login_inner a i.sign{
	width:18px; 
	height:15px; 
	display:inline-block;
	background:url(../images/icos.png) no-repeat 0 0; 
	vertical-align:-5px;
}
.user_login_inner a:hover i.sign{background-position:0 -15px;}
.user_login_inner a i.lock{
	width:18px; 
	height:17px; 
	display:inline-block;
	background:url(../images/icos.png) no-repeat 0 -29px; 
	vertical-align:-5px;
}
.user_login_inner a:hover i.lock{background-position:0 -47px;}
#headCont{
	width:1180px; 
	height:100px;
	margin:0 auto;
	position:relative;
}
/*LOGO*/	
.main_nav{
	width:1178px; 
	height:66px; 
	position:relative; 
	left:1px; top:0;
	background:url(../images/logoName.png) no-repeat 100px 6px;
	box-shadow:0 0 3px #dfefdf;
}
.main_nav .logo{
	width:60px; 
	height:60px; 
	padding:8px;
	position:absolute; 
	left:30px; 
	top:0px; 
	z-index:5;
}
.main_nav .logoName{
	width:120px; 
	height:60px; 
	position:absolute; 
	left:98px; top:5px; 
	font: 18px;
}
.main_nav ul.navigation{
	width:600px; 
	height:64px; 
	position:absolute;
	left:220px; top:2px;
}
.main_nav ul.navigation li{
	height:64px; 
	float:left;
	-moz-perspective:700px; 
	-webkit-perspective:700px; 
	-o-perspective:700px;
}
.main_nav ul.navigation li a{
	float:left; 
	line-height:64px; 
	position:relative; 
	left:0; top:0; 
	font-size:16px;
	color:#555; font-weight:bold; 
	text-shadow:1px 1px 1px #112233;
	-moz-transform-style:preserve-3d; 
	-webkit-transform-style:preserve-3d;
	-o-transform-style:preserve-3d; 
	transition:.4s; 
	-moz-transform-origin:center center -32px; 
	-webkit-transform-origin:center center -32px;	
	-o-transform-origin:center center -32px;			
}
.main_nav ul.navigation li a span{
	width:120px; height:64px; 
	float:left; text-align:center; 
	-moz-backface-visibility:hidden; 
	-webkit-backface-visibility:hidden;
	-o-backface-visibility:hidden;
}
.main_nav ul.navigation li a span:nth-of-type(2){
	position:absolute; 
	left:0; top:-64px; 
	color:#FFAE00; font-size:18px;
	-moz-transform-origin:bottom; 
	-webkit-transform-origin:bottom;
	-moz-transform:rotateX(90deg); 
	-webkit-transform:rotateX(90deg);
	-o-transform:rotateX(90deg);
}
.main_nav ul.navigation li a:hover{
	background:#77c2f3; 
	color:#ffae00;
	-moz-transform:rotateX(-90deg); 
	-webkit-transform:rotateX(-90deg);}
.main_nav ul.navigation li a.on{
	background:#77c2f3; 
	color:#ffae00;
	-moz-transform:rotateX(-90deg); 
	-webkit-transform:rotateX(-90deg);}
.main_nav .user_info{
	width:285px; 
	height:64px; 
	position:absolute;
	right:0; top:0;
}
.user_info .user_photo{
	width:40px; 
	height:40px; 
	border-radius:50%; 
	float:left;
	margin-top:15px;
	overflow:hidden;
}
.user_info a.nikeName{
	display:block; 
	float:left; 
	font-size:18px; 
	color:#77c2f3; 
	margin:22px 5px 0 5px;
}
.user_info a.nikeName:hover{color:#77c2f3;}
.user_info a.user_info_list{
	width:40px; 
	height:40px; 
	display:block; 
	float:left; 
	margin-top:15px;
	border-right:1px solid #efefef;
}
.user_info a.user_info_list:last-child{border:none;}
.user_info a.user_info_list:hover span{color:#77c2f3;}
.user_info a.user_info_list span{
	 width:40px; 
	 height:20px; 
	 display:block; 
	 color:#123;
}
.user_info a.user_info_list span:last-child{color:#999;}
nav.sub_nav{
	 width:1180px; 
	 height:34px; 
	 background:#627586;
	 position:absolute;
	 left:0; bottom:0; 
	 z-index:10;
}
.nav_list{
	width:1180px; 
	height:34px; 
	margin:0 auto;
}
/*次级导航 list*/
.sub_nav ul li{height:34px; float:left; margin-left: 10px;}
.sub_nav ul li a{width:100px; height:34px; display:block; color:#fff; line-height:34px;}
.sub_nav ul li a.smallogo span{width:40px; height:40px; display:block; margin:0 auto;}
.sub_nav ul li a.home{
	width:100px; 
	text-indent:10px;
	background-color: #123;
}
.sub_nav ul .sub_list{
	width:610px; 
	height:34px; float:left;
	position:relative; 
	left:0; top:0;
}
.sub_nav ul .sub_list p{
	position:absolute; 
	left:0; top:0; 
	display:none;
}
.sub_nav ul .sub_list p.active{display:block;}
.sub_nav ul .sub_list p a{
	width:120px;
	height:34px; 
	display:block; 
	float:left; 
	color:#fff; 
	line-height:34px; }
.sub_nav ul a:hover{
		color:#ffae00; background:#123;}

/*搜索框*/
.search_box{width:240px; height:29px; float:right; padding:5px 78px 0 0;
		position:relative; left:0; top:0; z-index:2;}
.search_box input.search{width:149px; height:24px; line-height:24px; float:right; 
		padding:0 8px; color:#666; background:#ededed;}
.search_box input.search_btn{width:40px; height:24px; float:right; cursor:pointer;
		background:#FFAE00}
.search_box input.search_btn:hover{background-color:#ed9500;}
/*轮播图 开始*/
.main_banner{width:100%; height:375px;}
.main_banner_wrap{
	width:1180px; height:375px; position:relative; background:#112233; 
	margin:0 auto; overflow:hidden;  box-shadow: 0px 1px 2px #c5c5c5;
}
#myCanvas {
	position: absolute;
	z-index: 13;
	opacity: 0.8;
	cursor: pointer;
	-webkit-animation: roll 3s;
	animation: roll 3s;
}
@-webkit-keyframes roll {
	from{-webkit-transform:rotate(120deg);opacity:0;}
	to{-webkit-transform:rotate(0deg);opacity:0.8;}		
}
@keyframes roll {
	from{transform:rotate(120deg);opacity:0;}
	to{transform:rotate(0deg);opacity:0.8;}		
}
.banner_btn{ 	/*a 标签 按钮*/
		width:255px; height:240px; position:absolute; 
		display:block; z-index:9; top:20px;
}
.btn_next{right:20px;}
.banner_btn span{width:50px; height:100px; display:block; position:absolute;
		left:110px; top:70px; opacity:0; transition:0.5s;
		background:url(../images/bannerBtn.png) no-repeat 0 0;}
.btn_next span{background-position:-50px 0;}
.main_banner_box:hover .banner_btn_arrow{opacity:0.6;}
.banner_btn span i{width:50px; height:100px; display:block;
		background:url(../images/bannerBtn.png) no-repeat 0 0;}
.btn_next span i{background-position:-50px 0;}
.banner_btn:hover i{
		-webkit-animation:arrow 0.5s infinite alternate ease-in-out;
		-moz-animation:arrow 0.5s infinite alternate ease-in-out;
}
@-webkit-keyframes arrow{
	from{-webkit-transform:scale(1); opacity:1;}
	to{-webkit-transform:scale(1.5); opacity:0.2;}
}
@-moz-keyframes arrow{
	from{-moz-transform:scale(1); opacity:1;}
	to{-moz-transform:scale(1.5); opacity:0.2;}
}

.main_banner_box{
	width:1200px; height:280px; margin:40px auto 0; position:relative; z-index:0;
	-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
}
.main_banner_box p#rflt{width:1200px; height:280px; position:absolute; left:0; top:280px;
		background:-moz-element(#m_box) no-repeat; -moz-transform:scaleY(-1); opacity:0.2;
}
.main_banner li{
		position:absolute; background:#000; overflow:hidden;
		box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);		
}
.main_banner li#imgCard0{
		width:670px; height:280px; z-index:5;
		left:255px; top:0px; opacity:1; background:#333d46;
}
.main_banner li#imgCard1{
		width:580px; height:240px; z-index:1; 
		left:600px; top:20px; opacity:1; background:#333d46;
}
.main_banner li#imgCard2{
		width:450px; height:180px; z-index:1;
		left:0px; top:60px; opacity:0; background:#333d46;
}
.main_banner li#imgCard3{
		width:450px; height:180px; z-index:1;
		left:0px; top:60px; opacity:0; background:#333d46;
}
.main_banner li#imgCard4{
		width:580px; height:240px; z-index:2; 
		left:0px; top:20px; opacity:1; background:#333d46;
}
.main_banner li img{width:100%; height:100%;}
.main_banner li span{/*遮罩层*/
		width:100%; height:100%; position:absolute; top:0; left:0; 
		z-index:1; background:#000; opacity:0; filter:alpha(opacity=0);
		color:#fff; font-size:30px; line-height:120px; text-align:center;
}
.main_banner li p{width:100%; height:50px; position:absolute;
		left:0; bottom:-50px; background:rgba(0,0,0,0.7); color:#fff;
		text-indent:38px; line-height:50px; font-size:25px;
}

/*指示器按钮*/
.btn_list{text-align:center; position:relative; left:0; top:6px; z-index:10;}
.btn_list span{
		width:15px; height:15px; display:inline-block; margin:15px 5px;
		background:#787d82; border-radius:50%; cursor:pointer;
}
.btn_list span.curr{background:#FFAE00;}

/*轮播图 结束*/
.page-section {
	width: 1180px;
	height: 160px;
	padding: 80px 0;
	position:relative;
	margin:20px auto;
	overflow:hidden;  
	background-color: #d4e0fe;
}
.row ul li{
	float:left;
	margin-top: -10px;
	margin-bottom: 10px;
}
/*排行榜*/
.songs_rcmd_title{width:1180px; height:35px; margin:35px auto 0;
		 box-shadow: 0px 1px 2px #c5c5c5;}
.rcmd_title{width:390px; height:35px; float:left; background:#fff;}
.rcmd_left_title{border-left:5px solid #F3508D;}
.rcmd_center_title{border-left:5px solid #0DAD51;}
.rcmd_right_title{border-left:5px solid #27A9E3;}
/*标题文字*/
.rcmd_left_title span,.rcmd_center_title span,.rcmd_right_title span{
		width:110px; height:24px; display:inline-block; 
		margin:7px 0 0 12px; float:left;
		background:#fff url(../images/index_title_bg.png) no-repeat 0 -48px;
		background-size:79%;}
.rcmd_center_title span{background-position:0 -225px;}
.rcmd_right_title span{background-position:0 -245px; background-size:100%;}
.rcmd_right_title{width:385px;}
.rcmd_left_title a.play_btn,.rcmd_center_title a.play_btn,.rcmd_right_title a.play_btn{
		width:24px; height:24px; display:inline-block; float:left;
		margin-top:6px; background:url(../images/play_btn1.png) no-repeat;}
.rcmd_left_title a.add_btn,.rcmd_center_title a.add_btn,.rcmd_right_title a.add_btn{
		width:24px; height:24px; display:inline-block; float:left;
		margin:6px 0 0 10px; background:url(../images/add_btn1.png) no-repeat; transition:1.2s;}
.rcmd_left_title a.play_btn:hover,.rcmd_center_title a.play_btn:hover,.rcmd_right_title a.play_btn:hover{
		background-image:url(../images/play_btn2.png);}
.rcmd_left_title a.add_btn:hover,.rcmd_center_title a.add_btn:hover,.rcmd_right_title a.add_btn:hover{
		background-image:url(../images/add_btn2.png); 
		-moz-transform:rotate(720deg); -webkit-transform:rotate(720deg);}
.rcmd_left_title a.more,.rcmd_center_title a.more,.rcmd_right_title a.more{/*更多*/
		width:40px; height:14px; display:inline-block; margin:12px 16px 0 0;
		float:right; background:url(../images/index_title_bg.png) no-repeat 0 -272px;
}
/*歌曲推荐 内容部分*/
.songs_rcmd{width:1180px; height:430px;
		margin:0 auto; position: relative;
		background-attachment:fixed; background-size:cover; overflow:hidden;  
		box-shadow: 0px 2px 4px #646464;
}	
.songs_rcmd_cont{width:1200px; height:430px; position:absolute; left:0; top:0;
		/*background:url(../images/bg_cover2.png) 1px 0;*/}
ul.rcmd_cont{width:394px; height:100%; border-right:1px solid rgba(0,0,0,.3); float:left;}
ul.rcmd_right{width:390px; height:100%; border:0;}
ul.rcmd_cont{-moz-perspective:600px; -moz-transform-style:preserve-3d;
		-webkit-perspective:600px; -webkit-transform-style:preserve-3d;}
ul.rcmd_cont li{width:92%; height:40px; line-height:40px; background:rgba(17,34,51,0.1);
		margin:5px auto; box-shadow:0 0 1px #fff; opacity:0;}
ul.rcmd_cont li.show{-moz-animation:songs_rcmd 2s forwards; 
		-webkit-animation:songs_rcmd 2s forwards; opacity:1;}
@-moz-keyframes songs_rcmd{/*歌单出场动画*/
		0%{-moz-transform:rotateY(120deg);}
		40%{-moz-transform:rotateY(-30deg);}
		60%{-moz-transform:rotateY(20deg);}
		80%{-moz-transform:rotateY(-10deg);}
		100%{-moz-transform:rotateY(0deg);}
}
@-webkit-keyframes songs_rcmd{
		0%{-webkit-transform:rotateY(120deg);}
		40%{-webkit-transform:rotateY(-30deg);}
		60%{-webkit-transform:rotateY(20deg);}
		80%{-webkit-transform:rotateY(-10deg);}
		100%{-webkit-transform:rotateY(0deg);}
}
ul.rcmd_cont li:first-child{margin-top:15px;}
ul.rcmd_cont li:hover{background:rgba(255,255,255,0); box-shadow:0 0 2px 2px #fff;}
ul.rcmd_cont li a{width:225px; height:40px; display:block; float:left; text-align:left; 
		color:#fff;  overflow:hidden;}
/*歌曲名称*/
ul.rcmd_cont li a.musicName{color:#000000;  margin-left:30px;}
ul.rcmd_cont li a.musicName:hover{color:#ffae00;}
ul.rcmd_cont li em{color:#fff; padding:0 5px;}
ul.rcmd_cont li a.playIcon,ul.rcmd_cont li a.shareIcon{width:25px; height:25px; 
		display:inline-block; margin-right:10px; float:right; margin-top:12px;
		background:url(../images/icos.png) no-repeat -184px -73px; }
ul.rcmd_cont li a.playIcon:hover{background-position:-184px -119px;}
ul.rcmd_cont li a.shareIcon{margin-right:30px; background-position:-185px -94px;}
ul.rcmd_cont li a.shareIcon:hover{background-position:-185px -140px;}
ul.rcmd_cont li i{padding:0 7px 0 4px; margin-right:10px; border-radius:50%; text-shadow:none;}
ul.rcmd_cont li i.first_place{background:#CF0B0E; color:#fff;}
ul.rcmd_cont li i.second_place{background:#F3B502; color:#fff;}
ul.rcmd_cont li i.third_place{background:#15ACCB; color:#fff;}
/*排行榜 结束*/
.omnibus{width:1180px; position:relative;
	margin:20px auto;
	overflow:hidden;}
.hot_singer_cont{width:1180px; height:180px; float:right; overflow:hidden;}
.hot_singer_cont ul.singer_list li{float: left; margin-right:90px;}
.hot_singer_cont ul.singer_list li a.singerPhoto{width:100px; height:100px; display:block; 
		border-radius:50%; border:2px solid #8cbeff; overflow:hidden; transition:.3s;}
.hot_singer_cont ul.singer_list li a.singerPhoto:hover{box-shadow:0 0 10px #5555ff;}
.hot_singer_cont ul.singer_list li a.singer{width:78px; height:40px; display:block; border-radius:0; 
		line-height:40px; color:#55aaff; font-size:12px;}
.hot_singer_cont ul.singer_list li a.singer:hover{text-decoration:underline;}
/*分类*/
.hot_singer_cont ul.singer_classify{width:1100px; padding:10px 0 0 20px;}
.hot_singer_cont ul.singer_classify li{width:70px; height:40px; float:left; margin-bottom:8px; margin-right: 46px;}
.hot_singer_cont ul.singer_classify li a{color:#ffaa00; font-size:14px; font-family:"黑体";}
.hot_singer_cont ul.singer_classify li a:hover{color:#333;}